* {
margin: 0;
box-sizing: border-box;
font-family: HelveticaNeue, Helvetica, sans-serif;
}
nav {
color: white;
}
.hamburger {
position: fixed;
top: 0;
right: 0;
z-index: 10;
display: flex;
align-items: center;
width: 25px;
height: 15px;
margin: 40px;
color: #3c4b9f;
cursor: pointer;
}
.hamburger::before {
content: "";
position: absolute;
inset: -5px;
background: #3c4b9f;
opacity: 0;
z-index: -1;
transition: opacity 0.3s cubic-bezier(0.75, 0, 0.25, 1);
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1);
background: currentColor;
}
.hamburger span::before,
.hamburger span::after {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
height: 2px;
background: currentColor;
transition: transform 0.4s cubic-bezier(0.75, 0, 0.25, 1),
top 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1),
background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
}
.hamburger span::before {
top: 0;
}
.hamburger span::after {
top: calc(100% - 2px);
}
.input__control {
opacity: 0;
width: 0;
height: 0;
appearance: none;
position: fixed;
}
.input__control:focus+label {
color: white;
}
.input__control:focus+label::before {
opacity: 1;
}
.input__control:checked+label {
height: 10px;
color: white;
}
.input__control:checked+label span {
transform: rotate(45deg);
}
.input__control:checked+label span::before,
.input__control:checked+label span::after {
top: calc(50% - 1px);
transition: transform 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1),
top 0.4s cubic-bezier(0.75, 0, 0.25, 1),
background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
}
.input__control:checked+label span::after {
transform: rotate(90deg);
}
.input__control:checked~ul {
z-index: 9;
transform: none;
transition: 0.5s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav__list {
position: fixed;
inset: 0;
z-index: -1;
background: #3c4b9f;
font-size: 4rem;
padding: 40px;
transform: translate(100vw) rotate(45deg);
transition: 0.2s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav__item {
list-style: none;
}
.nav__item+.nav__item {
margin-top: 20px;
}
.nav__link {
text-decoration: none;
color: inherit;
}